<!--
 包间详情页
 Created by xunyin 
 CopyRight 讯音云商（厦门）科技有限公司  www.tonetn.com
-->
<template>
	
	<view class="details">
		
		<swiper autoplay="true" class="swiper swiperBox" duration="1000" indicatorDots="true" interval="3000">
			<swiper-item class="swiperBox" v-for="banner of bannerList" :key="banner">
				<image class="img swiperBox" mode="heightFix" :src="banner"></image>
			</swiper-item> 
		</swiper>
		
<!-- 		<view
		  class="item"
		  v-for="keywordsKey of keywords"
		  :key="keywordsKey"
		  @click="toSearch(keywordsKey)"
		>{{ keywordsKey }}</view> -->
		
		<view class="headerBox">
			<view class="nameBox">
				{{storeRoomName}}<text>(推荐{{recommended}}人)</text>
			</view>
			<view class="iconBox">
<!-- 				<view class="icon" v-for="icon in iconList" :key="icon.id">
					{{icon.icon}}
				</view> -->
 				<view class="icon" v-for="icon of iconList" :key="icon">
					{{icon}}
				</view>			
				 
			</view>
			<view class="moneyBox">
				<text class="moneyIcon">￥</text>
				<text class="num">{{moneyFilter(price)}}元</text>
				<text class="text">/小时</text>
				<text class="textTwo">续订</text>
				<text class="numTwo">￥{{moneyFilter(repeatPrice)}}</text>
				<text class="text">/小时</text>
			</view>
			<view class="siteBox">
				<image src="../../../static/images/ditu.png" class="back" mode="widthFix"></image>
				<image class="iconImg" src="../../../static/images/detail-local.png" mode=""></image>
				<view class="siteTextBox">
					<view class="site">
						{{address}}
					</view>
					<view class="siteNum">
						<text>距离你{{distance}}km</text>
						<!-- <text>驾车{{teaDetailMsg.siteTime}}</text> -->
					</view>
				</view>
			</view>
			<view class="buttonBox">
				<view class="button one" @click="tenxun()">
					<image src="../../../static/images/detail-navgiate.png" mode=""></image>
					位置导航
				</view>
				<view class="button two" @click="call(phone)">
					<image src="../../../static/images/mobile.png" mode=""></image>
					电话咨询
				</view>
			</view>
		</view>

		<view class="timeSelect">
			<view class="title">
				<image src="../../../static/images/detail-time.png" mode=""></image>
				选择预定时间
			</view>
			<view class="selectTimeButton" @click="isShow(true)">
				<!-- 选择预定时间 --> {{selectTimeText}}
				<image src="../../../static/icon/homeDetaBottom.jpg" mode="heightFix"></image>
			</view>
		</view>

		<view class="explainBox">
			<view class="title">
				<image src="../../../static/images/detail-remark.png" mode=""></image>
				使用说明
			</view>
			<view class="content" v-html="instr"></view>
		</view>

		<view class="bottomBox">
			<view class="button">
				<view class="left"> 
					<text class="iconOne">￥</text>
					<text class="money" v-if="isRepeat == 0">{{moneyFilter(time ? time*price : '0')}}元</text>
					<text class="money" v-if="isRepeat == 1">{{moneyFilter(time ? time*repeatPrice : '0')}}元</text>
					<text class="moneyTwo">/共{{time}}小时</text>
				</view>
				<view class="right" @click="goPage('/pages/subPack/orderList/closeAccount')">
					去结算
				</view>
			</view>
		</view>

		<u-popup :show="show" :round="10" mode="bottom" @close="isShow(false)" @open="open">
			<view class="selectBox">
				<view class="titleBox">
					<view class="title">
						预定时间
						<image src="@/static/icon/close.png" mode="" @click="isShow(false)"></image>
					</view>
				</view>
				
				<view class="rollBox">
					
					<swiper class="swiper" circular="true" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in list" :key="index">
							<view class="swiper-item uni-bg-green">{{item}}</view>
						</swiper-item>
					</swiper>
					
				</view>
				
				<selectTime :beginTime="selectBeginTime" :endTime="selectEndTime" ref="selectTime">
					<!-- 这个地方是时间选择的组件，只需要传两个值 -->
					<!-- selectBeginTime是店铺开始营业的时间 默认值：00:00  格式是 HH:mm -->
					<!-- selectEndTime是店铺结束营业的时间 默认值：24:00  格式是 HH:mm -->
				</selectTime>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		TeaDetails
	} from "../../../utils/request/gather.js"
	import selectTime from "../../../components/selectTime/selectTime.vue"
	import {
		goTenXunLoca
	} from "@/utils/tenxunLoca.js"
	import Bus from '@/utils/Bus.js'
	import { getTimeListOrder } from '@/api/order';
	import { geStoreDetail } from '@/api/store';
	
	export default {
		data() {
			return {
				//detalisId: null, // 详情id
				//teaDetailMsg: {}, // 详情数据
				teaId:0,
				teaChildId:0,
				price:0,
				repeatPrice:0,
				startTimeNum:1,
				timeInterval:1,
				isRepeat:0,
				storeName:"",
				storeRoomName:"",
				recommended:1,
				iconList:[],
				address:"",
				distance:1,
				phone:"",
				instr:"",
				bannerList:[],		
				autoplay: true, // 自动滚动
				interval: 1000, // 	自动切换时间间隔
				duration: 10000, // 滑动动画时长
				list: [
					'该包间1小时1起订，续订1小时起享受续订优惠',
				],
				show: false, // 弹出层显示状态
				selectBeginTime: "00:00", // 日期的开始时间
				selectEndTime: "23:59", // 日期的结束时间,ios手机，24：00，打印出来为NAN，所以，处理是加上1000*60
				money: 0, // 金额
				time: 0, // 时长
				selectTimeText: "选择预定时间",
				image:"",
				selTimeData:{},
				parentOrderId:0,
				timeListDoflag:0,
				timeList:[],
				obj:{
				   timeList:[/* {
						date: "05-06", // 月份-日期
						selectBeginTime: "03:00", // 时间的开始时间
						// 时间格式 HH:mm:ss
						selectEndTime: "05:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段 
					} */]
				}
			}
		},
		components: {
			selectTime
		},
		onLoad(e) {
			console.log("e.images:"+e.images)
			console.log("e.icons:"+e.icons)
			this.teaId = e.teaId
			console.log("this.teaId:"+this.teaId)
			console.log("e.image:"+e.image)
			this.teaChildId = e.teaChildId
			this.storeRoomName = decodeURIComponent(e.storeRoomName)
			this.recommended = e.recommended
			this.address = decodeURIComponent(e.address)
			this.distance = e.distance
			this.phone = e.phone
			this.instr = e.instr
			this.price = e.price
			this.isRepeat = e.isRepeat
			this.image = e.image
			this.storeName = decodeURIComponent(e.storeName)
			this.latitude = e.latitude
			this.longitude = e.longitude
			this.repeatPrice = e.repeatPrice
			this.startTimeNum = e.startTimeNum
			this.list = [
				'该包间'+this.startTimeNum+'小时起订，续订享受续订优惠价',
			]
			console.log("this.latitude:"+this.latitude)
			console.log("this.longitude:"+this.longitude)
			if(e.images!==''||e.images!== null){
				this.bannerList = e.images.split(',');
			}
			if(e.icons!==''||e.icons!== null){
				
				this.iconList = decodeURIComponent(e.icons).split(',');
			}
			this.parentOrderId=e.parentOrderId;
			
			geStoreDetail(this.teaId).then(res => {
				var storeInfor = res.data;
				this.instr = storeInfor.instr
			})			
			this.timeList = [{
						date: "05-06", // 月份-日期
						selectBeginTime: "03:00", // 时间的开始时间
						// 时间格式 HH:mm:ss
						selectEndTime: "05:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段 
					}, {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段
					} /* , {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段
					} */]
					
			this.obj.timeList = [{
						date: "05-06", // 月份-日期
						selectBeginTime: "03:00", // 时间的开始时间
						// 时间格式 HH:mm:ss
						selectEndTime: "05:00", // 时间的结束时间
						sweep:0, // 打扫所需的时间段 
					}, {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:0, // 打扫所需的时间段
					} /* , {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段
					} */]		
/* 			let icons = e.icons;
			if(icons.length>0){
				this.iconList = e.icons.split(',');
			} */
			//this.getDetails()

			Bus.$on('isShow', (res) => {
				this.isShow(res)
			})
			
			Bus.$on('isTime', (res) => {
				this.isTime(res)
			})
			
		},
		provide: function() {
			
			return {
				subscribeObj:this.obj
				//subscribeObj: () => {
					//return this.obj.timeList 
					//console.log("timeList:"+JSON.stringify(this.timeList))
					//return this.timeList
					//setTimeout(function() {
					  
/* 						let param = {
							teaChildId:this.teaChildId
						}
						getTimeListOrder(param).then(res => {
							var timeList = res.data.timeList
							var reTimeList = []
							console.log("timeList:"+JSON.stringify(timeList))
							timeList.forEach(item=>{ */
	/* 						    var reItem = {
									date: item.date, // 月份-日期
									selectBeginTime: item.selectBeginTime, // 时间的开始时间
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime, // 时间的结束时间
									sweep:1, // 打扫所需的时间段 
								} */
/* 								reTimeList.push({
									date: item.date, // 月份-日期
									selectBeginTime: item.selectBeginTime, // 时间的开始时间
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime, // 时间的结束时间
									sweep:1, // 打扫所需的时间段 
								})
							})
							console.log("reTimeList:"+JSON.stringify(reTimeList)) */
							//this.timeListDoflag =1;		
							//return reTimeList;
						/* })	 */				  
					  
					//}, 1000);
					

					
/* 					return [{
						date: "05-06", // 月份-日期
						selectBeginTime: "03:00", // 时间的开始时间
						// 时间格式 HH:mm:ss
						selectEndTime: "05:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段 
					}, {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段
					} , {
						date: "05-06", // 月份-日期
						selectBeginTime: "13:00", // 时间的开始时间
						selectEndTime: "17:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段
					}] */ 
					
				//}
			} 
		},
		methods: {
			open() {
				// console.log('open');
			},
			formatePrice(money){
				return parseInt(money)
			},
			moneyFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			// 设置选择时间框的显示状态						
			isShow(state) { 
			
				if(state){
					
					let param = {
						teaChildId:this.teaChildId
					}
					getTimeListOrder(param).then(res => {
						
						var timeList = res.data.timeList
						this.obj.timeList = []
						console.log("timeList:"+JSON.stringify(timeList))
						timeList.forEach(item=>{
							
		/* 					var reItem = {
								date: item.date, // 月份-日期
								selectBeginTime: item.selectBeginTime, // 时间的开始时间
								// 时间格式 HH:mm:ss
								selectEndTime: item.selectEndTime, // 时间的结束时间
								sweep:1, // 打扫所需的时间段 
							} */
							
							if(this.isRepeat==1){
								
								this.obj.timeList.push({
									date: item.date,                       // 月份-日期
									selectBeginTime: item.selectBeginTime, // 时间的开始时间
									endDate: item.endDate,                 // 月份-日期
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime,    // 时间的结束时间
									sweep:0,                              // 打扫所需的时间段 
								})
								
							}else{
								
								this.obj.timeList.push({
									date: item.date,                         // 月份-日期
									selectBeginTime: item.selectBeginTime,   // 时间的开始时间
									endDate: item.endDate,                   // 月份-日期
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime,      // 时间的结束时间
									sweep:1,                               // 打扫所需的时间段 
								})
								
							}

						})	
						this.show = state
						this.$refs.selectTime.refreshTimeList(1);
					})
				}else{
					this.show = state
				}
				
/* 				this.obj.timeList = [{
							date: "05-06", // 月份-日期
							selectBeginTime: "03:00", // 时间的开始时间
							// 时间格式 HH:mm:ss
							selectEndTime: "05:00", // 时间的结束时间
							sweep:1, // 打扫所需的时间段 
						}, {
							date: "05-06", // 月份-日期
							selectBeginTime: "13:00", // 时间的开始时间
							selectEndTime: "17:00", // 时间的结束时间
							sweep:1, // 打扫所需的时间段
						} ] */
				
						
			},
			// 子组件传来的时间信息
			isTime(time) {
				
				this.time = time.timeInterval
				console.log("时常:" + time.timeInterval); // 预定时常
				console.log("预定日期:" + time.deta.date1); // 预定日期
				console.log("预定日期:" + time.deta.date); // 预定日期
				console.log("时间:" + time.startTime.begin + ' - ' + time.endTime.end); // 结束预约时间
				this.selectTimeText = time.deta.date+" " +time.startTime.begin+"~"+time.endTime.end
				//console.log("时间:" + time.startTime.time + ' - ' + time.endTime.time); // 结束预约时间
				this.selTimeData = time;
				this.timeInterval = time.timeInterval 
				
				 
			},
			getDetails() { // 获取详情
/* 				let data = {
					detalisId: this.detalisId
				}
				let that = this
				TeaDetails(data).then(res => {
					that.teaDetailMsg = res.data.data
				}) */
			},
			// 调起导航
			tenxun() { 
					
				goTenXunLoca(this.address, this.latitude, this.longitude);
				
			},
			call(phone) { // 拨打电话
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						uni.showToast({
							title: "拨打电话失败，请确认电话格式是否正确",
							icon: "none"
						})
					}
				})
			},
			// 跳转页面
			goPage(url) { 
				if (this.time != 0) {
					
					if(this.isRepeat==0){
						
						if(this.startTimeNum > this.timeInterval){
							
							uni.showToast({
								title: this.startTimeNum+"小时起订,请选择小时数大于等于"+this.startTimeNum+"小时哦",
								icon: "none"
							})
							return false;
							
						}
						
					}
					
					let orderMoney = this.time ? this.time*this.price : 0;
					// time.endTime.selectDate
					url = url+'?teaId='+this.teaId + '&teaChildId='+this.teaChildId + '&storeRoomName='+this.storeRoomName +
						'&storeName='+this.storeName + '&image=' + this.image + '&orderMoney=' + orderMoney + '&selectTimeText=' + this.selectTimeText +
						'&price='+this.price +'&timeInterval='+this.timeInterval+'&repeatPrice='+this.repeatPrice +'&isRepeat='+this.isRepeat +
						'&yeardate='+this.selTimeData.deta.date1+'&startTime='+this.selTimeData.startTime.begin+'&endDate='+this.selTimeData.endTime.selectDate+
						'&endTime='+this.selTimeData.endTime.end+'&monthDay='+this.selTimeData.startTime.selectDate+'&parentOrderId='+this.parentOrderId
						
					uni.navigateTo({
						url
					})
					
				} else {
					uni.showToast({
						title: "请选择时间段",
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #f2f3f7;
	}
</style>

<style lang="scss" scoped>
	.details {
		width: 100%;
		height: auto;

		.swiper {
			background: #f5f5f5;
			height: 414rpx;
		}

		.swiperBox {
			display: flex;
			justify-content: center;

			.img {
				height: 414rpx;
				width: 100%;
			}
		}

		.headerBox {
			width: calc(100% - 60rpx);
			height: auto;
			background: #fff;
			padding: 30rpx;

			.nameBox {
				font-size: 32rpx;
				color: #333;

				text {
					font-size: 28rpx;
					margin-left: 30rpx;
				}
			}

			.iconBox {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-top: 30rpx;

				.icon {
					padding: 2rpx 20rpx;
					border-radius: 5rpx;
					background: #f0f0f0;
					font-size: 24rpx;
					color: #6a5d6a;
					margin-right: 20rpx;
				}
			}

			.moneyBox {
				margin-top: 10rpx;

				.moneyIcon {
					color: #eb0707;
					font-size: 20rpx;
				}

				.num {
					color: #eb0707;
				}

				.text {
					font-size: 28rpx;
					color: #9999a6;
				}

				.textTwo {
					margin-left: 15rpx;
					font-size: 28rpx;
					color: #666;
				}

				.numTwo {
					color: #eb0707;
					font-size: 28rpx;
				}
			}

			.siteBox {
				flex: 1;
				min-height: 90rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				position: relative;
				padding: 20rpx;
				// background: #f7f8fc;
				z-index: 999;
				border-radius: 15rpx;
				position: relative;

				.back {
					width: 690rpx;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					z-index: -1;
				}

				.iconImg {
					width: 40rpx;
					height: 40rpx;
				}

				.siteTextBox {
					flex: 1;
					height: auto;
					margin-left: 20rpx;

					.site {
						color: #333;
						font-size: 32rpx;
					}

					.siteNum {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 15rpx;
						font-size: 22rpx;
						color: #316750;
					}
				}
			}

			.buttonBox {
				width: 100%;
				height: auto;
				display: flex;
				margin-top: 20rpx;

				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.one {
					color: #333;
					border-right: 2rpx solid #d8d8d8;
				}

				.two {
					color: #3e715c;
				}
			}
		}

		.timeSelect {
			width: calc(100% - 60rpx);
			height: auto;
			background: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx;

			.title {
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			.selectTimeButton {
				width: 80%;
				padding: 10rpx 0;
				height: auto;
				background: #fff5ec;
				text-align: center;
				margin: 20rpx auto 0;
				border-radius: 10rpx;
				color: #b2825a;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}

		.explainBox {
			width: calc(100% - 60rpx);
			height: auto;
			background: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx 120rpx;

			.title {
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			.content {
				margin-top: 60rpx;
			}
		}

		.bottomBox {
			width: 100%;
			height: auto;
			position: fixed;
			bottom: 20rpx;
			display: flex;
			justify-content: center;

			.button {
				width: 85%;
				height: 94rpx;
				background: #fff;
				display: flex;
				border-radius: 50rpx;
				overflow: hidden;

				.left {
					flex: 1;
					padding-left: 30rpx;
					display: flex;
					align-items: center;

					.iconOne {
						font-size: 20rpx;
						color: #eb0707;
					}

					.money {
						color: #eb0707;
					}

					.moneyTwo {
						font-size: 28rpx;
						color: #acacac;
					}
				}

				.right {
					width: 35%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background: linear-gradient(#f1cf9f, #b4845c);
				}
			}
		}

		.selectBox {
			width: auto;
			height: 75vh;
			overflow: auto;

			.titleBox {
				width: 100%;
				height: auto;
				margin-top: 25rpx;
				text-align: center;
				font-size: 34rpx;
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 20rpx;
				}
			}

			.rollBox {
				width: 100%;
				height: auto;

				.swiper {
					width: 90%;
					height: 35rpx;
					padding: 15rpx 0;
					margin: 40rpx auto 0;
					border-radius: 15rpx;
					font-size: 28rpx;
					background: #d8e2de;
					color: #316750;
					text-align: center;

					.swiper-item {
						width: 100%;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
